<template>
	<div class="query-details">
		<div class="topBox">
			<div class="topBoxSon1">
				<p>书城管理————<b>订单详情</b></p>
				<button class=" el-icon-refresh-right" @click="refresh()"></button>
			</div>
		</div>
		<div class="searchBox">
			<div class="searchSonBox1">
				<h3 class="el-icon-s-data">后台订单管理</h3>
			</div>
			<div class="searchSonBox1">
				<el-select placeholder="请选择"style="width: 60%;" v-model="payment" >
				    <el-option label="未付款" value="0"></el-option>
				    <el-option label="已付款" value="1"></el-option>
				</el-select>
				<el-input v-model="username" placeholder="下单人-账号" style="width: 60%;"></el-input>
			</div>
			<div class="searchSonBox1">
				<el-select placeholder="请选择" style="width: 60%;" v-model="shipments">
				    <el-option label="未发货" value="0"></el-option>
				    <el-option label="已发货" value="1"></el-option>
					<el-option label="已签收" value="2"></el-option>
				</el-select>
				<el-input v-model="phone" placeholder="下单人-手机号" style="width: 60%;"></el-input>
			</div>
			<div class="searchSonBox1">
				<el-select placeholder="请选择" style="width: 60%;" v-model="time">
				    <el-option label="7天内" value="7天内"></el-option>
				    <el-option label="15天内" value="15天内"></el-option>
					<el-option label="30天内" value="30天内"></el-option>
					<el-option label="60天内" value="60天内"></el-option>
					<el-option label="120天内" value="120天内"></el-option>
				</el-select>
				<el-input v-model="name" placeholder="下单人-姓名" style="width: 60%;"></el-input>
			</div>
			<div class="searchSonBox2">
				<el-button class="el-icon-search" style="width: 60%;color: white;background-color: #009688;" @click="trackOrder()">查询</el-button>
			</div>
		</div>
		<el-table
		    :data="tableData"
		    style="width: 90%;margin: 0 auto;">
		    <el-table-column type="expand">
		      <template slot-scope="props">
				  <table style="width: 80%;margin: 0 auto;">
				  	<tr>
						<td></td>
				  		<td>账号:{{props.row.user.account}}</td>
						<td>电话:{{props.row.user.phone}}</td>
						<td>下单:{{props.row.user.nickname}}</td>
						<td></td>
				  	</tr>
					<tr v-for="item in props.row.items">
						<td style="width: 10%;">
							<el-image style="width: 7vh;height: 7vh;"
								:src="`http://127.0.0.1/api/public/showimg/${item.book.pic}`">
							</el-image>
						</td>
						<td style="width: 20%;">名称:{{item.book.name}}</td>
						<td style="width: 20%;">数量:{{item.num}}</td>
						<td style="width: 20%;">单价:{{item.price}}</td>
						<td>库存:{{item.book.stock}}</td>
					</tr>
				  </table>
		    </template>
		    </el-table-column>
		    <el-table-column
		      label="订单号"
		      prop="ordid">
		    </el-table-column>
			<el-table-column
		      label="收货人"
		      prop="ship2name">
		    </el-table-column>
		    <el-table-column
		      label="收货地址"
		      prop="ship2addr">
		    </el-table-column>
			<el-table-column
		      label="电话"
		      prop="ship2phone">
		    </el-table-column>
			<el-table-column
		      label="发货单号"
		      prop="tship">
		    </el-table-column>
			<el-table-column
			  label="发货时间"
			  prop="tcreate">
				<template slot-scope="scope" >
					{{scope.row.tcreate|run}}
				</template>
			</el-table-column>
			<el-table-column
		      label="总价"
		      prop="amount">
			</el-table-column>
			<el-table-column
			    label="付款">
				<template slot-scope="scope" >
					{{scope.row.payStatus==1?'已付':'未付'}}
				</template>
			</el-table-column>
			<el-table-column
			    label="发货">
				<template slot-scope="scope" >
					<span v-if="scope.row.shipStatus===1">
						{{scope.row.shipStatus==1?'已发货':scope.row.shipStatus==2?'已收货':'未发货'}}
					</span>
					<span v-if="scope.row.payStatus">
						<el-button v-if="scope.row.shipStatus==0" type="text" @click="go(scope.row)">去发货</el-button>
					</span>
				</template>
			</el-table-column>			
			</el-table>
		</el-table>
		<div class="bottomBox">
			<p>后台管理</p>
		</div>	
	</div>
</template>

<script>
	export default {
			name:'QueryDetails',
			data(){
				return{
					tableData:[],
					payment:'请选择',
					shipments:'请选择',
					time:'请选择',
					username:'',
					name:'',
					phone:'',
				}
			},
			filters:{
				run(value){
					let one = new Date(value);
					let year = one.getFullYear()+"-"+(one.getMonth()+1)+"-"+one.getDate();
					return year;
				}
			},
			methods: {
				handleOpen(key, keyPath) {
					console.log(key, keyPath);
			},
				handleClose(key, keyPath) {
					console.log(key, keyPath);
			},
			findOrder(){
				this.$postk("/api/adm/ord/findPageOrders2u/1/5").then(
				(resp)=>{
					console.log(resp.data);
					this.tableData=resp.data.data.orders;
				})
			},
			trackOrder(){
				this.tableData=[];
				console.log(this.payment);
				console.log(this.shipments);
				console.log(this.time);
				let fd=new FormData();
				fd.append("payStaus",this.payment);
				fd.append("shipStatus",this.shipments);
				fd.append("days",this.time);
				fd.append("account",this.username);
				fd.append("nickname",this.name);
				fd.append("phone",this.phone);
				this.$postj("/api/adm/ord/findPageOrders2u/1/5",fd)
				.then((resp)=>{
					console.log(resp.data.data.orders);
					this.tableData=resp.data.data.orders;
				})
			},
			go(query){
				
			},
			refresh(){
				this.$router.go(0);
			}
		},
		mounted(){
			this.findOrder();
		}
	}
</script>

<style scoped>
	.query-details{
		width: 100%;
		height: 100%;
	}
	.topBox{
		display: flex;
		width: 90%;
		margin: 0 auto;
	}
	.topBoxSon1{
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #aaa6a6;
	}
	.topBoxSon1 p{
		line-height: 60px;
		font-size: 20px;
		color: #aaa6a6;
	}
	.topBoxSon1 p b{
		font-weight: 400;
		line-height: 60px;
		font-size: 20px;
		color: #818181;
	}
	.topBoxSon1 button{
		display: flex;
		background-color: #009688;
		color: white;
		font-size: 20px;
		border: none;
		border-radius: 5px;
		height: 40px;
		width: 55px;
		margin-top: 10px;
		align-items: center;
		text-align: center;
		padding-left: 15px;
	}
	.searchBox{
		width: 90%;
		height: 100px;
		display: flex;
		margin: 0 auto;
		margin-top: 20px;
	}
	.searchSonBox1{
		width: 22%;
		height: 100px;
	}
	.searchSonBox2{
		width: 12%;
		height: 100px;
	}
	.bottomBox{
		display: flex;
		width: 100%;
		height: 50px;
		background-color: #D3D3D3;
		display: flex;
		position: absolute;
		bottom: 0;
	}
	.bottomBox.p{
		margin: 20px auto;
	}
	.col4{
		background-color: #393d49;
	}
	.but1{
		border: none;
		background-color: white;
	}
</style>